
import React from 'react';
import { Input, Button, List } from 'antd';

const NewTodoListUI = (props) => {
    return (
        <div>
            <div style={{marginTop: '50px'}}>
                <Input placeholder="new todo" style={{width: 300,marginRight: 30}} value={props.inputValue} onChange={props.handleChangeInputValue}/>
                <Button type="primary" onClick={props.handleSubmit}>提交</Button>
            </div>
            <List
                style={{marginTop: '10px',width: '300px'}}
                dataSource={props.list}
                bordered
                renderItem={(item,index) => (
                    <List.Item onClick={() => props.handleDeleteItem(index)}>
                        {item}
                    </List.Item>
                )}
            />
        </div>
    )
};
export default NewTodoListUI;